<template>
  <div>
    <a slot="title" >
      {{ $t('m.system.permission.other.menu_permission_label') }}：
      <a-checkbox @change="expandOrCloseAll">
        {{ $t('m.system.permission.other.unfold_fold') }}
      </a-checkbox>
      <a-checkbox @change="checkOrCancleALL">
        {{ $t('m.system.permission.other.all_none') }}
      </a-checkbox>
      <a-checkbox @change="switchCheckStrictly">
        {{ $t('m.system.permission.other.father_son_link') }}
      </a-checkbox>
    </a>
    <a slot="extra" >
      <a-button type="primary" @click="handleSubmit">
        {{ $t('m.common.button.save') }}
      </a-button>
    </a>
    <a-form>
      <a-form-item style="height:calc(100vh - 275px);overflow-y: auto; overflow-x:hidden;padding-left:20px;">
        <a-tree
          checkable
          @check="onCheck"
          :checkedKeys="checkedKeys"
          :treeData="treeData"
          @expand="onExpand"
          @select="onTreeNodeSelect"
          :selectedKeys="selectedKeys"
          :expandedKeys="expandedKeysss"
          :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<ych-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></ych-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>
    <role-datarule-modal ref="datarule"></role-datarule-modal>
  </div>
</template>
<script>

  import {queryRolePermission, saveRolePermission} from '@/api/api'
  import RoleDataruleModal from './RoleDataruleModal.vue'
  import {getAction} from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'RolePermissionModal',
    components: {
      RoleDataruleModal
    },
    props: {
      back: String,
      roleId:String,
    },
    data() {
      return {
        treeData: [],
        defaultCheckedKeys: [],
        checkedKeys: [],
        expandedKeysss: [],
        allTreeKeys: [],
        autoExpandParent: true,
        checkStrictly: true,
        title: '角色权限配置',
        loading: false,
        selectedKeys: [],
        url: {
          queryTreeListForRole: YchConstant.PREFIX_SYSTEM + '/role/queryTreeList'
        }
      }
    },
    methods: {
      onTreeNodeSelect(id) {
        if (id && id.length > 0) {
          this.selectedKeys = id
        }
        this.$refs.datarule.show(this.selectedKeys[0], this.roleId)
      },
      onCheck(o) {
        if (this.checkStrictly) {
          this.checkedKeys = o.checked
        } else {
          this.checkedKeys = o
        }
      },
      onExpand(expandedKeys) {
        this.expandedKeysss = expandedKeys
        this.autoExpandParent = false
      },
      reset() {
        this.expandedKeysss = []
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.loading = false
      },
      expandOrCloseAll(e) {
        if(e.target.checked){
          this.expandedKeysss = this.allTreeKeys
        }else{
          this.expandedKeysss = []
        }
      },

      checkOrCancleALL(e) {
        if(e.target.checked){
          this.checkedKeys = this.allTreeKeys
        }else{
          this.checkedKeys = []
        }

      },

      switchCheckStrictly(e) {
        if(e.target.checked){
          this.checkStrictly = false
        }else{
          this.checkStrictly = true
        }
      },
      handleCancel() {
        this.close()
      },
      handleSubmit() {
        let that = this
        if(!this.roleId){
          that.messageUtil.warning(this.$t('m.system.permission.other.select_role') )
          return
        }

        let params = {
          roleId: that.roleId,
          permissionIds: that.checkedKeys.join(','),
          lastpermissionIds: that.defaultCheckedKeys.join(','),
        }
        that.loading = true
        // //console.log('请求参数：', params)
        saveRolePermission(params).then((res) => {
          if (res.success) {
            that.messageUtil.success(res.message)
            that.loading = false
          } else {
            that.messageUtil.error(res.message)
            that.loading = false
          }
          this.loadData()
        })
      },
      loadData() {
        if(this.roleId){
          getAction(this.url.queryTreeListForRole, {back: this.back}).then((res) => {
            this.treeData = res.result.treeList
            this.allTreeKeys = res.result.ids
            queryRolePermission({roleId: this.roleId}).then((res) => {
              this.checkedKeys = [...res.result]
              this.defaultCheckedKeys = [...res.result]
              //this.expandedKeysss = this.allTreeKeys
              // //console.log(this.defaultCheckedKeys)
            })
          })
        }

      }
    },
    watch: {
      roleId: {
        handler () {
          this.loadData()
        },
        immediate: false
      }
    }
  }

</script>
<style lang="less" scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>
